<template>
    <div class="user_details">
        <el-button type="primary"  @click="downloadExl()">导出用户数据</el-button>
        <a href="" :download="downloadName" id="hf"></a>
        <div class="divline"></div>
        <el-row>
            <div>
                <p v-for="data in getUserInfo()" v-text="`${data.key}:${data.value}`"></p>
            </div>
            <el-col :span="24"><div>用户积分:{{integral}}   积分行为:</div></el-col>
            <el-col :span="12" :offset="6">
              <el-table  :data="integralData" border style="width: 100%;margin-top:10px;" align='center'>
                  <el-table-column
                      prop="source"
                      label="用户行为"
                      align="center"
                      width="130">
                  </el-table-column>
                  <el-table-column  
                      prop="score"
                      label="积分变化"
                      :formatter="formatterScore"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="ctime"
                      label="时间"
                      :formatter="formatterCtime"
                      align="center"
                      width="170">
                  </el-table-column>
              </el-table>
            </el-col>

            <el-col :span="24"><div>用户答卷进度:</div></el-col>
            <el-col :span="24" >
              <el-table  :data="progressData" border style="width: 100%;margin-top:10px;" align='center'>
                  <el-table-column
                      prop="type"
                      label="试卷类型"
                      align="center"
                      width="130">
                  </el-table-column>
                  <el-table-column
                      prop="progress"
                      label="答题进度"
                      align="center"
                      width="170">
                  </el-table-column>
              </el-table>
            </el-col>

            <el-col :span="24"><div>用户答卷:</div></el-col>
            <el-col :span="24" >
              <el-table  :data="scoreData" border style="width: 100%;margin-top:10px;" align='center'>
                  <el-table-column
                      prop="type"
                      label="试卷类型"
                      align="center"
                      width="130">
                  </el-table-column>
                  <el-table-column  v-for="scoreName in scoreNames"
                      :prop="scoreName"
                      :label="scoreName"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="ctime"
                      label="时间"
                      :formatter="formatterCtime"
                      align="center"
                      width="170">
                  </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:20px;"><div>用户得分折线图:</div></el-col>
            <el-col :span="16" :offset="4" style="margin-top:20px;">
                <div id="answerColumn" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="24" style="margin-top:20px;"><div>用户答卷详情:</div></el-col>
           
            <div v-for="paper in papers">
                <el-col :span="24" class="divline"></el-col>
                <el-col :span="24">
                    <p> {{formatterType(paper.etype)}}问卷  <span style="color:gray">{{formattertime(paper.time)}}</span></p>
                </el-col>
                <el-col :span="24" v-for="(question,qindex) in paper.answer">
                    <p style="margin:5px;">{{qindex + 1}}  {{formatterQtype(question.question.type)}}:{{question.question.main}}</p>
                    <div v-if="checkQtype(question.question.type)">
                        <p v-for="(option,aindex) in question.question.options" :style="{color:setOptionColor(question.valueid,option.id)}" style="margin-left:10px">
                            选项{{aindex + 1}}  {{ option.value}}{{showSorce(option)}}{{showCheck(option,question.question.remark)}}
                        </p>
                    </div>
                    <div v-else>
                        <p style="color:red;margin-left:20px;">{{question.remark}}</p>
                    </div>
                </el-col>
            </div>
        </el-row>
    </div>
</template>

<script>
    import UserDetailsJs from './UserDetails.js';
    module.exports = UserDetailsJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
</style>
